<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>达人服务-欢聚网</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" th:href="@{/css/mui.min.css}" />
		<link rel="stylesheet" th:href="@{/css/common.css}" />
		<link rel="stylesheet" th:href="@{/css/icons-extra.css}" />
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">达人服务详细</h1>
			<a class="cj-margin-top-10 mui-icon-extra mui-icon-extra-share mui-pull-right"></a>
			<a class="cj-margin-top-10 mui-icon-extra mui-icon-extra-heart mui-pull-right"></a>

		</header>
		<div class="mui-content ">
			<div id="slider" class="mui-slider">
				<div class="mui-slider-group mui-slider-loop">
					<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
					<div class="mui-slider-item mui-slider-item-duplicate">
						<a href="#">
							<img src="/img/introduce-3.jpg">
						</a>
					</div>
					<!-- 第一张 -->
					<div class="mui-slider-item">
						<a href="#">
							<img src="/img/introduce-1.jpg">
						</a>
					</div>
					<!-- 第二张 -->
					<div class="mui-slider-item">
						<a href="#">
							<img src="/img/introduce-2.jpg">
						</a>
					</div>
					<!-- 第三张 -->
					<div class="mui-slider-item">
						<a href="#">
							<img src="/img/introduce-3.jpg">
						</a>
					</div>
					<!-- 第四张 -->
					<div class="mui-slider-item">
						<a href="#">
							<img src="/img/introduce-1.jpg">
						</a>
					</div>
					<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
					<div class="mui-slider-item mui-slider-item-duplicate">
						<a href="#">
							<img src="/img/introduce-3.jpg">
						</a>

					</div>

				</div>
				<div class="mui-slider-indicator">
					<div class="mui-indicator mui-active"></div>
					<div class="mui-indicator"></div>
					<div class="mui-indicator"></div>
					<div class="mui-indicator"></div>
				</div>

			</div>
			<div>
				<ul class="mui-table-view">
					<li class="mui-table-view-cell">
						<div class="mui-row">
							<div class="mui-col-sm-10 mui-col-xs-10">
								<img class="mui-pull-left" src="/img/head.jpg" width="40px" />
								<div class="mui-pull-left">
									<p>&nbsp;服务提供</p>
									<p class="cj-serives-title">&nbsp;牛逼的摄影达人</p>
								</div>
							</div>
							<div class="mui-col-sm-2 mui-col-xs-2 mui-pull-right">
								<p class="cj-serives-price">￥1666</p>
							</div>

						</div>

					</li>
					<li class="mui-table-view-cell mui-collapse mui-active">
						<a class="mui-navigate-right" href="#">服务详细</a>
						<ul class="mui-table-view mui-table-view-chevron">
							<li class="mui-table-view-cell">
								服务详细服务详细服务详细服务详细服务详细服务详细服务详细服务详细服务详细服务详细服务详细服务详细服务详细
							</li>
						</ul>
					</li>
				</ul>
				<ul class="mui-table-view">
					<li class="mui-table-view-cell mui-collapse mui-active">
						<a class="mui-navigate-right" href="#">注意事项</a>
						<ul class="mui-table-view mui-table-view-chevron">
							<li class="mui-table-view-cell">
								注意事项注意事项注意事项注意事项注意事项注意事项注意事项注意事项注意事项注意事项注意事项注意事项注意事项 注意事项
							</li>
						</ul>
					</li>
				</ul>
			</div>

			<div class="mui-content-padded ">
				<p class="mui-text-center cj-line-height-40 cj-margin-0  cj-bg-white">用户评价</p>
				<ul class="mui-table-view">
					<li class="mui-table-view-cell">
						<div class="mui-row">
							<div class="mui-col-sm-12 mui-col-xs-12">
								<img class="mui-pull-left" src="/img/head.jpg" width="30px" />
								<div class="mui-pull-left cj-line-height-30">
									<p class="cj-text-size-12">&nbsp;用户昵称&nbsp;&nbsp;2017-05-24</p>
								</div>
							</div>
						</div>
						<div class="cj-user-commit">
							用户评价用户评价用户评价
						</div>
					</li>
					<li class="mui-table-view-cell">
						<div class="mui-row">
							<div class="mui-col-sm-12 mui-col-xs-12">
								<img class="mui-pull-left" src="/img/head.jpg" width="30px" />
								<div class="mui-pull-left cj-line-height-30">
									<p class="cj-text-size-12">&nbsp;用户昵称&nbsp;&nbsp;2017-05-24</p>
								</div>
							</div>
						</div>
						<div class="cj-user-commit">
							用户评价用户评价用户评价
						</div>
					</li>
					<li class="mui-table-view-cell">
						<div class="mui-row">
							<div class="mui-col-sm-12 mui-col-xs-12">
								<img class="mui-pull-left" src="/img/head.jpg" width="30px" />
								<div class="mui-pull-left cj-line-height-30">
									<p class="cj-text-size-12">&nbsp;用户昵称&nbsp;&nbsp;2017-05-24</p>
								</div>
							</div>
						</div>
						<div class="cj-user-commit">
							用户评价用户评价用户评价
						</div>
					</li>
				</ul>
			</div>
		</div>

		<div class="cj-line-60"></div>
		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item mui-active" href="#tabbar">
				<span class="mui-tab-label">微信咨询</span>
			</a>
			<a class="mui-tab-item" href="#tabbar-with-chat">
				<button style="top:0;" type="button" class="mui-btn-primary mui-btn-block ">加入清单</button>
			</a>
		</nav>
		<script src="/js/mui.min.js"></script>
		<script src="/js/jquery.min.js"></script>
		<script src="/js/common.js"></script>
		<script type="text/javascript">
			//图片轮播
			var slider = mui("#slider");
			slider.slider({
				interval: 500,
			});
		</script>
	</body>
	</body>

</html>